<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-6">静态聚合码测试</h1>

    <a-row :gutter="16">
      <a-col :span="24">
        <a-card class="shadow-sm">
          <div class="text-center">
            <a-descriptions :column="1" bordered class="merchant-info">
              <a-descriptions-item label="商户名称">测试商户</a-descriptions-item>
              <a-descriptions-item label="商户号">1234567890</a-descriptions-item>
            </a-descriptions>

            <div class="mt-6">
              <div class="text-gray-500 mb-2">请使用微信或支付宝扫码支付</div>
              <div class="flex justify-center space-x-4 mb-4">
                <div class="text-center">
                  <wechat-outlined class="text-2xl text-success" />
                  <div class="text-sm">微信支付</div>
                </div>
                <div class="text-center">
                  <alipay-outlined class="text-2xl text-primary" />
                  <div class="text-sm">支付宝</div>
                </div>
              </div>
              <div class="flex justify-center">
                <qrcode-vue
                  :value="payUrl"
                  :size="180"
                  level="H"
                  render-as="svg"
                />
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { WechatOutlined, AlipayOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import QrcodeVue from 'qrcode.vue'

const payUrl = ref('')

// 生成测试订单号
const generateOrderNo = () => {
  return 'TEST' + Date.now()
}

// 获取支付链接
const getPayUrl = () => {
  try {
    // 生成测试订单号
    const orderNo = generateOrderNo()
    // 生成支付链接
    payUrl.value = `${window.location.origin}/pay?orderNo=${orderNo}`
  } catch (error) {
    console.error('生成支付链接失败:', error)
    message.error('生成支付链接失败')
  }
}

onMounted(() => {
  getPayUrl()
})
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
  border: none;
}

.merchant-info {
  display: inline-block;
  text-align: center;
  min-width: 300px;
}

.merchant-info :deep(.ant-descriptions-item) {
  padding: 12px 32px;
}

.merchant-info :deep(.ant-descriptions-item-label) {
  width: 120px;
  color: #666;
}

.text-primary {
  color: var(--primary-color);
}

.text-success {
  color: var(--success-color);
}
</style>